<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@page import="java.sql.*"%>
<%@page import="java.util.*"%>
 <jsp:useBean id="db" class="ctm.javacode.dbBean"/>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>參考食譜</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script
	src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script language="Javascript" type="text/javascript" src="./JQuery/cuisine.js"></script>
<style type="text/css">
<!--
body {
	background-image: url(img/grass.jpg);
	background-position: center top;
	background-color: #FFFFFF;
	background-repeat: repeat;
}

body,td,th {
	color: #000000;
	font-size: 24px;
	font-family: Arial;
}

a:link {
	text-decoration: none;
	font-family: Arial;
	font-size: 20px;
	color: #FFFFFF;
}

a:visited {
	text-decoration: none;
	font-family: Arial;
	font-size: 20px;
	color: #FFFFFF;
}

a:hover {
	text-decoration: none;
	font-family: Arial;
	font-size: 20px;
	color: #000000;
}

.class2 a:link {
	text-decoration: none;
	font-family: "標楷體";
	font-size: 20px;
	color: #000000;
}

.class2 a:visited {
	text-decoration: none;
	font-family: "標楷體";
	font-size: 20px;
	color: #000000;
}

.class2 a:active {
	text-decoration: none;
	font-family: "標楷體";
	font-size: 20px;
	color: #0000FF;
}

.class2 a:hover {
	text-decoration: none;
	font-family: "標楷體";
	font-size: 20px;
	color: #0000FF;
}

.ind:link {
	color: #535353;
	text-decoration: none;
	font-family: "標楷體";
	font-size: 18px;
}

.ind:visited {
	color: #535353;
	text-decoration: none;
	font-family: "標楷體";
	font-size: 18px;
}

.ind:hover {
	color: #BB280F;
	text-decoration: none;
	font-family: "標楷體";
	font-size: 18px;
}

.off {
	display: none;
}

.on {
	display: block;
}

.HEAD_STYLE {
	font-weight: bold;
	color: #437A27;
	font-family: "標楷體";
	font-size: 30px;
}

.TEXT_STYLE {
	font-family: "標楷體";
	color: #000000;
	font-size: 24px;
}

.BOTTOM_STYLE {
	color: #FFFFFF;
	font-family: Arial;
	font-size: 20px;
}

.LEFT_BUTTON {
	font-family: "標楷體";
	font-size: 30px;
}

.button {
	border: 1px;
	padding-top: 4px;
	padding-right: 7px;
	padding-bottom: 4px;
	padding-left: 7px;
	background-color: #468129;
	color: #FFFFFF;
	font-size: 16px;
	border-color: #3C7023;
}

.button2 {
	border: 1px;
	padding-top: 4px;
	padding-right: 7px;
	padding-bottom: 4px;
	padding-left: 7px;
	background-color: #468129;
	color: #FFFFFF;
	font-size: 20px;
	border-color: #3C7023;
}

.style2 {
	color: #437A27;
	font-weight: bold;
	font-size: 30px;
}

.style3 {
	color: #437A27;
	font-weight: bold;
}
-->
</style>
</head>

<body alink="#FF0000" vlink="#FF0000">

	<table width="100%" border="0">
		<tr>
			<td><p>&nbsp;</p></td>
		</tr>
		<tr>
			<td width="5%">&nbsp;</td>
			<td bgcolor="#FFFFFF">
				<table width="100%" border="0">
					<tr>
						<td background="img/herbal.jpg">
							<p>&nbsp;</p>
							<p>&nbsp;</p>
							<p>&nbsp;</p>
							<p>&nbsp;</p>
							<p>&nbsp;</p>
						</td>
					</tr>
					<tr>
						<td>
							<table bgcolor="#437A27" width="100%" border="0">
								<tr>
									<td>&nbsp;</td>
									<td width="20%" align="center"><a href="main.jsp"
										target="_parent">回到主選單</a></td>
								</tr>
							</table>
						</td>
					</tr>
					<tr>
						<td>
							<form name="nourishment" action="#">
							<table width="100%">
								<tr><td  align="center">
								<span class="style2">參考食譜</span>
								</td></tr>
								<tr>
									<td align="left" class="TEXT_STYLE">
										<span>輸入食材:</span>
										<input type="text" id="input_ingredient" name="ingredient" style="width: 200px; text-align: left;"></input>
										<input name="button" type="button" id="join" value="加入" class="button2"/> 
									</td>
								</tr>
								<tr>
									<td align="left" class="TEXT_STYLE">
										<span>已輸入食材:</span>
										<input type="text" id="ingredient" name="ingredient" style="width: 400px; text-align: left;
										height: 40px;" readonly="readonly"></input>
										<input name="button" type="button" id="submit" value="查詢" class="button2"/>
										
										<input name="button" type="reset" id="resetbutton" value="清除" class="button2"/>  
									</td>
								</tr>
								<tr>
									<td align="left" class="TEXT_STYLE">
										<span>選擇飲食型態:</span>
										<input type="radio" name="type" value="vegetable" checked="checked">素食
                  						<input type="radio" name="type" value="meat" >葷食
                  						<input type="radio" name="type" value="all" >全部(葷、素)
									</td>
								</tr>
							</table>
							</form>
							<table width="100%">
								<tr>
									<td align="left" class="TEXT_STYLE" width="10%">
										<span>食譜</span>
									</td>
									<td align="left" class="TEXT_STYLE">										
										<div>
											<select id="cuisine_list" size="5" style="font-size: 20px; overflow: auto; width: 400px; height: 134px">
											</select>
										</div>
									</td>
								</tr>	
							</table>
							<div id="t1">
								<table width="100%" border="1">
									<tr>
										<td align="left" class="TEXT_STYLE" width="5%">
											<p align="center">材料</p>
										</td>
										<td width="45%"><div id="div1"></div></td>
										<td align="left" class="TEXT_STYLE" width="5%">
											<p align="center">調味料</p>
										</td>
										<td width="45%"><div id="div2"></div></td>
									</tr>
								</table>
								<table width="100%" border="1">
									<tr>
										<td align="left" class="TEXT_STYLE" width="5%">
											<p align="center">作法</p>
										</td>
										<td><div id="div3"></div></td>

									</tr>
								</table>
								<div class="class2">
									<div id="div4"></div>
								</div>
							</div>
						</td>
					</tr>
					<tr>
						<td><p>&nbsp;</p></td>
					</tr>
					<tr>
						<td bgcolor="#437A27">
							<div align="center" class="BOTTOM_STYLE">Copyright@ITRI and CCU_PLlab</div>
						</td>
					</tr>
				</table>
			</td>
			<td width="5%">&nbsp;</td>
		</tr>
	</table>
	<p>&nbsp;</p>
</body>
</html>